<template>
  <div id="app">
    <p>
      <button @click="curIndex = (curIndex + 1) % comps.length">switch</button>
    </p>
    <!-- :include="['Comp1', 'Comp2'] 只缓存这两个组件，每一项是组件的名字，或者写成一个字符串用逗号分隔 -->
    <!-- 或者可以写成一个正则表达式，满足条件的缓存 -->
    <!-- :exclude="['Comp1', 'Comp2'] 除了这些组件缓存-->
    <keep-alive :include="['Comp1', 'Comp2']">
      <!-- 动态组件 -->
      <!-- 只保留组件，和普通元素没关系，比如p标签 -->
      <!-- 其实在组件一被创建，就已经缓存了 -->
      <component :is="comps[curIndex]"></component>
      <!-- 再切换组件的过程中依次创建组件实例，并且进行了缓存 -->
      <!-- 再次切换组件时效率很高，直接替换页面上的真实dom，但是占用了更多内存，相当于使用空间换了时间 -->
      <!-- 如果组件还有子组件，所有子组件都被缓存 -->
    </keep-alive>

    <!-- 这种写法也可以 -->
    <!-- <keep-alive>
      <Comp1 v-if="i === 0" />
      <Comp2 v-else-if="i === 1"/>
      <Comp3 v-else/>
    </keep-alive> -->
  </div>
</template>

<script>
import Comp1 from "./components/Comp1";
import Comp2 from "./components/Comp2";
import Comp3 from "./components/Comp3";
// 动态组件生成不用注册组件
export default {
  data() {
    return {
      comps: Object.freeze([Comp1, Comp2, Comp3]), // 冻结一下，不变成响应式，因为这是组件的配置对象
      curIndex: 0,
    };
  },
};
</script>

<style>
#app {
  width: 500px;
  margin: 0 auto;
  text-align: center;
}
</style>
